<template>
    <div class="shop">
        <div class="topSearch">
            <span class="iconfont icon-fanhui back" @click="handleBack"></span>
            <Search :width=100 :isPending=false></Search>
        </div>
        <div class="nearList">
           <ShopItem :item=shopItem></ShopItem>
        </div>

        <Content :item=shopItem></Content>
        <Cart></Cart>
    </div>
</template>

<script setup lang="ts">
import  {ref,watch} from 'vue'
import { get } from "../utils/require";
import type {NearbyItem ,Response} from '../types/types'
import Search from '../components/Search.vue';
import ShopItem from '../components/ShopItem.vue';
import Content from '../components/Content.vue';
import { useRoute,useRouter } from 'vue-router';
import Cart from '../components/Cart.vue';
const route = useRoute()
console.log(route);

const router = useRouter()

watch(route,(route,prevRoute)=>{
    getDetail()
})
const shopItem = ref({} as NearbyItem) 
const getDetail = async() =>{    
   const res = await get(`/api/shopDetail/${route.params.id}`);
   if(res.code==0){       
    shopItem.value = res.data
   }
}
const handleBack = () =>{
    router.back()
}
getDetail()
</script>

<style lang="scss" scoped>
.shop {
    .topSearch{
        display: flex;
        align-items: center;
        padding:.16rem .18rem;
        .back{
            margin-right: .16rem;
            color: #B6B6B6;
        }
    }
    .nearby_title {
        font-size: 18px;
        color: #333333;
        margin-left: .18rem;
        margin-top: .16rem;
    }
    .nearList {
        margin-bottom: .24rem;
        &__item {
            display: flex;
            margin: 0.12rem;
            &__img {
                width: 0.56rem;
                height: 0.56rem;
                margin-left: .06rem;
                margin-right: 0.16rem;
            }
            &__content {
                flex:1;
                color: #333;
                .title {
                    font-size: 0.16rem;
                    line-height: .22rem;
                    margin-bottom: 0.08rem;
                }
                .tag {
                    font-size: 0.13rem;
                    margin-bottom: 0.08rem;
                    line-height: .18rem;
                }
                .red {
                    color: #e93b3b;
                    margin-bottom: .08rem;
                }
            }
        }
    }
}
</style>